<template>
  <v-chart class="chart" :option="option" autoresize />
</template>

<script setup>
import { color, use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from "echarts/components";
import VChart from "vue-echarts";
import { ref, watch, defineProps } from "vue";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
]);
const props = defineProps({
  type: {
    type: String,
    default: "bar",
  },
  seriesData: {
    type: Array,
    default: () => [],
  },
});
const option = ref({
  title: {
    show: true,
    text: "123",
    textStyle: {
      color: "#fff",
      fontSize: 14,
    },
  },
  color: ["#3877F2", "#86EFAC", "#E24A3B"],
  series: [
    {
      type: "pie",
      radius: ["55%", "65%"],
      center: ["89px", "105px"],
      padAngle: 2,
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 2,
        borderWidth: 4,
      },
      label: {
        show: false,
        position: "center",
      },
      labelLine: {
        show: false,
      },
      data: props.seriesData,
    },
  ],
});

watch(
  () => props.seriesData,
  (val) => {
    option.value.series[0].data = val;
    console.log("option", option);
  },
  { deep: true }
);
</script>

<style scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>
